<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>

    </div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.min.css';
  export default {
    name: 'lunbo',
    mounted() {

      /* eslint-disable no-new */
      var a = new Swiper('.swiper-container', {
        //轮播方向 horizontal水平 vertical竖直的
        direction: 'horizontal',
        //是否无限轮播
        loop: true,
        //自动轮播
        autoplay: 1000,
        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,

      })

    }
  }
</script>

<style scoped>
  .swiper-container {
    cursor: pointer;
    width: 100%;
    height: 500px;
  }

  .swiper-button-prev {
    left: 80px;
    border: 6px solid orange;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: orange;
    margin-top: -30px;
    opacity: 0.5;
  }

  .swiper-button-next {
    right: 80px;
    width: 60px;
    border: 6px solid orange;
    border-radius: 50%;
    background-color: orange;
    height: 60px;
    margin-top: -30px;
    opacity: 0.5;
  }

  .swiper-button-prev:hover {
    opacity: 0.8;
  }

  .swiper-button-next:hover {
    opacity: 0.8;
  }
</style>
